<template>
  <div>
    <div class="login-wrapper">
      <form class="login-form">
        <h3>黑马管理平台</h3>
        <label for="username">用户:</label>
        <input
            id="username"
            v-model="username"
            type="text"
            required
            @blur="checkUserName"
        />
        <label for="password">密码:</label>
        <input id="password" v-model="password" type="password" required/>
        <button class="login-button" type="submit" @click="handleSubmit">
          登录
        </button>
      </form>
    </div>
  </div>
</template>

<script>
import request from '../utils/request';

export default {
  name: 'login',
  data() {
    return {
      username: '',
      password: '',
      flag: '',
    };
  },
  methods: {
    handleSubmit() {
      if (!this.flag) {
        this.$notify.error({
          title: '错误',
          message: '格式有误，请重新填写',
        });
        return;
      }
      request
          .get(
              `emp/login?username=${this.username.trim()}&password=${this.password.trim()}`
          )
          .then((data) => {
            console.log(data.data);
            localStorage.setItem('token', data.data.data);
            if (data.data.code) {
              this.$router.push('/index');
            } else {
              this.$notify.error({
                title: '错误',
                message: '密码错误，请重试',
              });

            }
          })
          .catch((error) => {
            console.error(error);
            this.$notify.error({
              title: '错误',
              message: '请求错误，请重试',
            });
          });
    },
    checkUserName() {
      if (this.username.trim() == null || this.username.length === 0) {
        this.flag = false;
        this.$notify.error({
          title: '错误',
          message: '输入为空',
        });
        return;
      }
      request
          .get(`emp/check?username=${this.username.trim()}`)
          .then((data) => {
            if (data.data.code) {
              this.$notify({
                title: '成功',
                message: '用户存在',
                type: 'success',
              });
              this.flag = true;
            } else {
              this.flag = false;
              this.$notify.error({
                title: '错误',
                message: '此用户不存在',
              });

            }
          })
          .catch((error) => {
            console.error(error);
            this.flag = false;
            this.$notify.error({
              title: '错误',
              message: '此用户不存在',
            });
          });
    },
  },
  // mounted() {
  //   console.log("axios", this.axios);
  // }
};
</script>

<style scoped>
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background-color: #f2f2f2;
}

.login-form {
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  width: 500px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

input {
  display: block;
  width: 80%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}

.login-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.login-button:hover {
  background-color: #0069d9;
}
</style>
